<%@ page contentType="text/html;charset=UTF-8"
	trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>我的</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/pensonal.css" />
<link href="${ctxStatic }/wx/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/setting.css" />
<script src="${ctxStatic }/wx/mui/js/mui.min.js"></script>
<script src="${ctxStatic }/wx/mui/js/mui.view.js "></script>
<script src="${ctxStatic }/zepto/zepto.min.js"></script>
<script src="${ctxStatic }/wx/js/xiake.js"></script>
<script type="text/javascript" charset="utf-8">
	mui.init();
</script>
</head>
<body>
<body>
	<header class="mui-bar mui-bar-nav" 
		id="xiakeh1">
		<a class="mui-icon mui-icon-location mui-navigate-left"
			style="color: #fff;"></a> <span class="xkh-date" style="color: #fff;"
			id="city"></span>
		<h1 class="mui-title" style="color: #fff;">我的</h1>
		<a class="mui-icon mui-icon-upload" style="color: #fff; float: right;"></a>
	</header>
	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title" style="color: #fff;">我的</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" href="#account">
									<img class="mui-media-object mui-pull-left head-img" 
										id="head-img" src="${ctxStatic }/wx/images/touxiang_wode@1x.png">
									<div class="mui-media-body">
										<p class='mui-ellipsis' id="nickname"></p>
										<p class='mui-ellipsis' id="tel"></p>
									</div>
								</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/xuqiu_wode@2x.png" />
								</i>
								<a id="notifi" href="#notifications" class="mui-navigate-right">定制需求</a>
							</li>
							<li class="mui-table-view-cell" id="fp">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/fapiao_wode@2x.png" />
								</i>
								<a  id="invoice-ta"  class="mui-navigate-right">关于发票</a>
							</li>
							<li class="mui-table-view-cell" id="fx" style="display: none;">
								<i class="person-ico">
									<img src="${ctxStatic }/wx/images/fenxiao_wode@2x.png" />
								</i>
								<a  class="mui-navigate-right">分销</a>
							</li>
							<li class="mui-table-view-cell">
								<i class="person-ico">
									 <img src="${ctxStatic }/wx/images/yhq_wode@2x.png" />
								</i>
								<a href="#coupon" id="yhq" class="mui-navigate-right">优惠券</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<i class="person-ico picon5">
									<img src="${ctxStatic }/wx/images/shezhi_wode@2x.png" />
								</i>
								<a href="javascript:void(0)" id="sz" class="mui-navigate-right">设置 <i class="mui-pull-right update"></i></a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" style="text-align: center;">
								<a id="logout">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--修改信息-->
		<div id="account" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav" style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">个人信息</h1>
				 <button  class="pres-ico" id="subBtn">保存</button>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<input type="hidden" name="userid" id="userid" value="${sessionScope.front_user.id}" />
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a>昵称<input type="text" class="per-infor" id="nickname2" name="nickname"/></a>
							</li>
							<li class="mui-table-view-cell">
								<a>手机号<input type="number" class="per-infor" readonly id="tel2" /></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--定制包车-->
		<div id="notifications" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav" style="color: #fff;"></span>我的
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">定制需求</h1>
			</div>
			<div class="customs-head">
							<div class="mui-col-xs-4 stm-j" value="">
								  <span class="orders-gc">全部</span>
							</div>
							<div class="mui-col-xs-4 stm-j"  value="2">
								  <span>已响应</span>
							</div>
							<div class="mui-col-xs-4 stm-j" value="1">
								  <span>待响应</span>
							</div>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="coutom-wrap">
							 <div class="coutom-toal cotmf">
							 	  <ul class="mui-table-view demand" id="ul1"></ul>
							 </div>
							 <div class="coutom-cancel cotmf">
							 	  <ul class="mui-table-view demand" id="ul2"></ul>
							 </div>
							 <div class="coutom-nos cotmf">
							 	  <ul class="mui-table-view demand" id="ul3"></ul>
							 </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--优惠券-->
		<div id="coupon" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav" style="color: #fff;"></span>我的
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">优惠券</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view" style="background: none;" id="ul4"> </ul>
					</div>
				</div>
			</div>
		</div>
	</body>	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item " data-url="${ctxWx}/pu/index"> <span
			class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span>
		</a> <a class="mui-tab-item" data-url="${ctxWx}/orders/orderList"> <span
			class="mui-icon mui-icon-list"> </span> <span class="mui-tab-label">订单</span>
		</a> <a class="mui-tab-item <c:if test='${pageStyle == indexPage}'>mui-active</c:if> " data-url="${ctxWx}/my/myInfoPage"> <span
			class="mui-icon mui-icon-contact"></span> <span class="mui-tab-label">我的</span>
		</a>
	</nav>
<script type="text/javascript">
	mui.init();
	//查找用户信息
	mui.post('${ctxFront}/mobile/getUserInfo',{userid:'${sessionScope.front_user.id}'},function(d){
		var nickname = d.data.name;
		var flatType = d.data.flatType;
		var tel = d.data.mobile;
		$('#nickname').text(nickname);
		$('#nickname2').val(nickname);
		$('#tel').text(tel);
		$('#tel2').val(tel);
		//flattype为2,才显示分销
		if (flatType=='2') {
			document.getElementById("fx").style.display="";//显示
		}
	},'json')
	//修改昵称
	$('#subBtn').on('tap', function() {
		var nickname = $('#nickname2').val();
		var userid = '${sessionScope.front_user.id}';
		mui.post('${ctxFront}/mobile/modifyNickName',{nickname:nickname,userid:userid,type:'wx'},function(d){
			if (d.code=='200') {
				mui.alert(d.message,function(){
					window.location.href = "${ctxWx}/my/myInfoPage";
				})
			} else{
				mui.alert(d.message);
			}
		},'json')
	});
	//定制需求点击
	$('#notifi').on('tap', function() {
		mui.post('${ctxFront}/mobile/demandList',{
					userid:'${sessionScope.front_user.id}',
					pageNo:1,
					pageSize:500,
					reactstatus:""
				},function(d){
					if(d.code=='200'){
						appendData(d,"");
					}else{
						mui.alert(d.message)
					}
		}, 'json');
	});
	//优惠券点击
	$('#yhq').on('tap', function() {
		mui.post('${ctxFront}/mobile/mycupons',{
					userId:'${sessionScope.front_user.id}',
					pageNo:1,
					pageSize:500
				},function(d){
					if(d.code=='200'){
						appendData3(d);
					}else{
						mui.alert(d.message)
					}
		}, 'json');
	});
	//退出登录
	$('#logout').on('tap', function() {
		window.location.href = "${ctxWx}/pu/logout";
	});
	//设置
	$('#sz').on('tap', function() {
		window.location.href = "${ctxWx}/my/settingPage";
	});
	$('.stm-j').on('tap', function() {
		var status = this.getAttribute("value");
		mui.post('${ctxFront}/mobile/demandList',{
					userid:'${sessionScope.front_user.id}',
					pageNo:1,
					pageSize:500,
					reactstatus:status
				},function(d){
					if(d.code=='200'){
						appendData(d,status);
					}else{
						mui.alert(d.message)
					}
		}, 'json');
	});
	function appendData(d,reactstatus){
		var sm = d.data.demandList;
		var table = "";
		if (reactstatus=="") {
			table = document.getElementById("ul1");
		} else if(reactstatus=="2"){//已响应
			table = document.getElementById("ul2");
		}else if(reactstatus=="1"){//待响应
			table = document.getElementById("ul3");
		}	
		table.innerHTML = "";//清空数据
		for (var i=0;i<sm.length;i++) {
			var li = document.createElement("li");
			li.className = "mui-table-view-cell htop";
			var str = "";
			var demandName = sm[i].departcity.sitename+"-"+sm[i].destcity.sitename;
			var createDate = sm[i].createDate.split(" ")[0];
			var dateStr = getLocalTime(sm[i].fromdate);
			//订单状态
			var reactStatus = "";
			var reactStatusColor = "";
			var rectcount = sm[i].rectcount;
			var demandid = sm[i].demandid;
			if (sm[i].reactstatus=='1') {
				reactStatus = "待响应";
				reactStatusColor = '#333';
			} else if(sm[i].reactstatus=='2'){
				reactStatus = "已响应";
				reactStatusColor = 'red';
			} else if(sm[i].reactstatus=='3'){
				reactStatus = "已支付";
				reactStatusColor = '#16C59B';
			}else if(sm[i].reactstatus=='4'){
				reactStatus = "已取消";
				reactStatusColor = '#8f8f94';
			}
			str += "<a  href='${ctxWx}/custom/demandDetail?demandid="+demandid+"'>";
	        str += "<div class='mui-col-xs-6 sctf'>";
	        str += "<p style='color: #333;font-size: 14px;'>"+demandName+"</p>";
	        str += "<p>车型 :"+sm[i].cartype.typename+"</p>";
	        str += "<p>用车时间:"+dateStr+"</p>";
	        str += "</div>";
	        str += "<div class='mui-col-xs-6 sctf'>";
	        str += "<p style='text-align: right;'>发布日期："+createDate+"</p>"; 
	        if (sm[i].reactstatus=='2') {
				str += "<p class='s-cts' style='color: "+reactStatusColor+";'>"+reactStatus+"("+rectcount+")"+"</p>";
			} else{
				str += "<p class='s-cts' style='color: "+reactStatusColor+";'>"+reactStatus+"</p>";
			}
	        str += "</div>";
			str += "</a>";
			li.innerHTML = str;
	        table.appendChild(li);
		}
	}
	function appendData3(d){
		var sm = d.data.info;
		var table = document.getElementById("ul4");
		table.innerHTML = "";//清空数据
		for (var i=0;i<sm.length;i++) {
			var li = document.createElement("li");
			li.className = "mui-table-view-cell coupon-box";
			var endDate = sm[i].timeOver;
			var timeOver = getLocalTime(endDate);
			var str = "";
			str += "<div class='mui-col-xs-5 pay-tit'>";
			str += "<p>";
			if (sm[i].type=='0') {//满减
				str += "<font>￥</font>";
				str += "<span class='do_cou_ct'>"+sm[i].price+"</span>";
			} else{//折扣
				str += "<font></font>";
				str += "<span class='do_cou_ct'>"+sm[i].price+"折</span>";
			}
			str += "</p>";
			str += "</div>";
            str += "<div class='mui-col-xs-7 coupon-txt'>";
            str += "<p class='news-tit'>"+sm[i].name+"</p>";
            str += "<p class='dans'>"+sm[i].instruction+"</p>";
            str += "<p class='dans'>有效期至： "+timeOver+"</p>";
            str += "</div>";
			li.innerHTML = str;
	        table.appendChild(li);
		}
	}
	function getLocalTime(nS) {  
		var date = new Date();  
	    date.setTime(nS);  
	    var y = date.getFullYear();      
	    var m = date.getMonth() + 1;      
	    m = m < 10 ? ('0' + m) : m;      
	    var d = date.getDate();      
	    d = d < 10 ? ('0' + d) : d;      
	    var h = date.getHours();    
	    h = h < 10 ? ('0' + h) : h;    
	    var minute = date.getMinutes();    
	    var second = date.getSeconds();    
	    minute = minute < 10 ? ('0' + minute) : minute;      
	    second = second < 10 ? ('0' + second) : second;     
	    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;      
	};
	//初始化单页view
	var viewApi = mui('#app').view({
		defaultPage: '#setting'
	});
	var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});
		})(mui);
	//初始化单页的区域滚动
	mui('.mui-scroll-wrapper').scroll();
	$(function() {
		$('.mui-tab-item').on('tap', function() {
			if ($(this).attr('data-url') != '') {
				window.location.href = $(this).attr('data-url');
			}
		});
		//发票点击
		$('#fp').on('tap', function() {
			window.location.href = "${ctxWx}/my/fpPage";
		});
		//分销点击
		$('#fx').on('tap', function() {
			window.location.href = "${ctxWx}/my/fxPage";
		});
	});
</script>
</html>
